<template>
    <el-row>
        <el-col :span="24" class="euphoria">
            <ul class="modules">
                <li v-for="i in images" :key="i" class="card" :class="{ 'hovered': isHovered === i }"
                    @click="centerDialogVisible = true">
                    <img crossorigin="anonymous" src="@/assets/img/2023052313.jpg" :style="{
                        opacity: hoverIndex === -1 ? 1 : i === hoverIndex ? 1 : 0.2
                    }" @mouseover="handleMouseEnter($event.target, i)" @mouseout="handleMouseLeave">
                </li>
            </ul>
        </el-col>
        <!-- 游戏滚动 -->
        <el-dialog v-model="centerDialogVisible" width="50%" align-center>
            <template #header>
                <div class="el-dialog-header">
                    <ruby style="float: left;">
                        <h3>苍之彼方的四重奏</h3>
                        <rt>蒼の彼方のフォーリズム</rt>
                    </ruby>
                    <span style="float: left; margin-left: 20px;">
                        <el-tag>治愈之风</el-tag>
                        <el-tag>0721</el-tag>
                        <el-tag>热血</el-tag>
                    </span>
                </div>
            </template>
            <div style="float: left;width: 75%;" @click="this.$router.push('/euphoria/details')">
                <img src="@/assets/img/2023052313.jpg" alt="/">
            </div>
            <div style="float: left;width: calc(25% - 10px);margin-left:10px; ">
                <div style="height: 345px; border-radius: 4px; border: 1px solid #ddd;">
                    <n-scrollbar style="height: 345px;padding: 5px;">
                        我们在田野上面找猪
                        想象中已找到了三只
                        小鸟在白云上面追逐
                        它们在树底下跳舞
                        啦啦啦啦啦啦啦啦咧
                        啦啦啦啦咧
                        我们在想象中度过了许多年
                        想象中我们是如此的疯狂
                        我们在城市里面找猪
                        想象中已找到了几百万只
                        小鸟在公园里面唱歌
                        它们独自在想象里跳舞
                        啦啦啦啦啦啦啦啦咧
                        啦啦啦啦咧
                        我们在想象中度过了许多年
                        许多年之后我们又开始想象
                        啦啦啦啦啦啦啦啦咧
                    </n-scrollbar>
                </div>
                <div style="margin-top: 10px;display: flex;flex-wrap: wrap;justify-content: space-between;">
                    <el-button type="primary" @click="link">百度网盘</el-button>
                    <el-button type="primary" @click="link">移动网盘</el-button>
                </div>
            </div>
        </el-dialog>
    </el-row>
</template>

<script setup>
import debounce from '@/js/debounce'
import ColorThief from 'colorthief';

const colorThief = new ColorThief();

const images = [];
const html = document.documentElement;
for (let i = 1; i <= 9; i++) {
    images.push(`https://picsum.photos/800/800?r=${i}`)
}
const hoverIndex = ref(-1)
const isHovered = ref(false);
// 防抖
const handleMouseEnter = debounce(async (img, i) => {
    isHovered.value = i;
    hoverIndex.value = i;
    let colors = await colorThief.getPalette(img, 3);
    colors = colors.map((c) => `rgb(${c[0]},${c[1]},${c[2]})`);
    html.style.setProperty('--c1', colors[0]);
    html.style.setProperty('--c2', colors[1]);
    html.style.setProperty('--c3', colors[2]);
})

const handleMouseLeave = debounce(() => {
    isHovered.value = null;
    hoverIndex.value = -1;
    html.style.setProperty('--c1', '#fff');
    html.style.setProperty('--c2', '#fff');
    html.style.setProperty('--c3', '#fff');
})

const centerDialogVisible = ref()
const link = () => {
    centerDialogVisible.value = false;
    ElMessage.success("链接复制成功!!");
}
</script>

<style scoped>
.euphoria {
    width: 100%;
    height: fit-content;
    background-image: linear-gradient(var(--c1), var(--c2), var(--c3));
    transition: background 0.5s ease;
}

.modules {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.card {
    width: calc(100%/3.3);
    max-height: 300px;
    margin: 10px;
    border-radius: 8px;
    background-color: #ddd;
}

.card.hovered {
    position: relative;
    bottom: 5px;
    box-shadow: 1px 1px 10px #ccc;
    border: 5px solid #fff;
    transition: 0.5s;
}

img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}
</style>